<style lang="less">
    @import './index.less';
</style>

<template>
    <div class="login">
        <div class="login-con" :class="{'login-reg-form':loginShow==='register'}">
            <Card icon="log-in" :title="showTitle" :bordered="false">
                <div class="form-con">
                    <login-form @on-success-valid="handleSubmit" v-show="loginShow === 'login'"></login-form>
                    <register-form @on-success-valid="registerSuccess" v-show="loginShow === 'register'"></register-form>
                    <change-pwd-form @on-success-valid="changePwdSuccess" v-show="loginShow === 'changePwd'"></change-pwd-form>
                    <p class="login-tip" v-show="loginShow === 'register' || loginShow === 'changePwd'">已有账号》<a @click="shouLoginOrRegister('login')">登录</a></p>
                    <p class="login-tip" v-show="loginShow === 'login'">注册账号》<a @click="shouLoginOrRegister('register')">注册</a></p>
                    <p class="login-tip"><a @click="shouLoginOrRegister('changePwd')">忘记密码</a></p>
                </div>
            </Card>
        </div>
        <customer></customer>
    </div>
</template>

<script>
import LoginForm from './login-form'
import { mapActions } from 'vuex'
import RegisterForm from './register-form'
import ChangePwdForm from './change-pwd-form'
import Customer from '@/components/customer/index'

export default {
  name: 'MeLogin',
  components: {
    Customer,
    ChangePwdForm,
    RegisterForm,
    LoginForm
  },
  data () {
    return {
      loginShow: 'login',
      pwdForm: false
    }
  },
  props: {
    bgImg: {
      type: String,
      default: () => {
        return 'https://skv4.oss-cn-hangzhou.aliyuncs.com/google/login-bg.png'
      }
    }
  },
  computed: {
    showTitle () {
      return this.loginShow ? '欢迎登录' : '欢迎注册'
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getMenuHeaderListData'
    ]),
    handleSubmit ({ userName, password }) {
      this.handleLogin({ userName, password }).then(res => {
        if (res.errcode === 0) {
          if (res.data.errcode === 0) {
            // this.$Message.success('登录成功')
            this.getMenuHeaderListData()
            this.$router.push({
              name: this.$config.homeName
            })
          } else {
            this.$Message.error(res.data.errmsg)
          }
        } else {
          if (res.errcode === 1001) {
            this.$Message.success('登录成功')
            this.getMenuHeaderListData()
            console.log(this.$config.homeName, '登录的地址')
            this.$router.push({
              name: this.$config.homeName
            })
          } else {
            this.$Message.error(res.errmsg)
          }
        }
      })
    },
    registerSuccess () {
      this.loginShow = 'login'
    },
    changePwdSuccess () {
      this.loginShow = 'login'
    },
    shouLoginOrRegister (type) {
      this.loginShow = type
    }
  }
}
</script>
